<template>
  <ContentWrap>
    <el-dialog v-model="visible" title="签名信息" width="700px" append-to-body>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="process" label="完成流程" align="center" width="100px">
          <template #default="{ row }">
            {{ row.process }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="100px">
          <template #default="{  $index }">
            <el-input v-model="tableData[$index].name" placeholder="请输入姓名" input-style="text-align:center;" />
          </template>
        </el-table-column>
        <el-table-column prop="signature" label="签名" align="center">
          <template #default="{ $index }">
            <div style="width: 120px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px dashed #dcdfe6;" @click="openSignDialog($index)">
              <template v-if="tableData[$index].signature">
                <img :src="tableData[$index].signature" alt="签名" style="max-width: 100%; max-height: 40px; display: block;" />
              </template>
              <template v-else>
                <span style="color: #bbb;">请签名(单击)</span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="signTime" label="签名时间" align="center">
          <template #default="{ $index }">
            <el-date-picker
              v-model="tableData[$index].signTime"
              type="date"
              placeholder="请选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%; height: 100%;"
              popper-class="signature-date-picker-popper"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="{$index }">
            <el-button link type="primary" @click="copyRow($index)">复制</el-button>
            <el-button link type="danger" @click="removeRow($index)" :disabled="tableData.length === 1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 电子签名弹窗 -->
    <el-dialog v-model="signDialogVisible" title="电子签名" width="400px" append-to-body>
      <SignaturePad
        v-if="currentSignIndex !== null"
        v-model="tableData[currentSignIndex].signature"
        :width="350"
        :height="180"
        @save="handleSignConfirm"
        ref="signaturePadRef"
        @close-dialog="signDialogVisible=false"
      />
      <template #footer>

      </template>
    </el-dialog>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import SignaturePad from '@/views/project/list/SignaturePad.vue'
const props = defineProps<{
  modelValue: boolean
  tableData: Array<{
    process: string
    name: string
    signature: string
    signTime: string
  }>
}>()
const emit = defineEmits(['update:modelValue', 'update:tableData', 'onConfirm'])

const visible = ref(props.modelValue)
watch(() => props.modelValue, val => visible.value = val)
watch(visible, val => emit('update:modelValue', val))

const tableData = ref(props.tableData)
watch(() => props.tableData, val => tableData.value = val)

// 电子签名弹窗相关
const signDialogVisible = ref(false)
const signaturePadRef = ref<any>(null)
const currentSignIndex = ref<number | null>(null)

function openSignDialog(index: number) {
  currentSignIndex.value = index
  signDialogVisible.value = true
}
function handleSignConfirm() {
  signDialogVisible.value = false
}

// 校验并确认
function handleConfirm() {
  for (const [i, row] of tableData.value.entries()) {
    if (!row.process ) {
      ElMessage.error(`第${i + 1}行“完成流程”不能为空！`)
      return
    }
    if (  !row.name  ) {
      ElMessage.error(`第${i + 1}行“姓名”不能为空！`)
      return
    }
    if ( !row.signTime) {
      ElMessage.error(`第${i + 1}行“签名时间”不能为空！`)
      return
    }
  }
  emit('update:tableData', tableData.value)
  emit('onConfirm', tableData.value)
  visible.value = false
}

// 复制当前行
function copyRow(index: number) {
  const newRow = JSON.parse(JSON.stringify(tableData.value[index]))
  tableData.value.splice(index + 1, 0, newRow)
}
// 删除当前行，至少保留一行
function removeRow(index: number) {
  if (tableData.value.length > 1) {
    tableData.value.splice(index, 1)
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-table__body .el-table__cell) {
  padding: 0 !important;
  height: 68px !important;
  line-height: 68px !important;
  vertical-align: middle !important;
}
:deep(.el-table__body .cell) {
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* 左右居中 */
}
:deep(.el-input__wrapper),
:deep(.el-date-editor) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}
:deep(.el-input__wrapper) {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}
:deep(.el-input) {
  width: 100% !important;
  height: 100% !important;
  text-align: center;
}
:deep(.el-date-editor) {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
}
:deep(.el-date-editor .el-input__wrapper) {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  height: 100% !important;
}
// 修正日期弹窗样式
:deep(.signature-date-picker-popper) {
  z-index: 3000 !important;
}
:deep(.center-date-input .el-input__inner) {
  text-align: center;
}
</style>
